<template>
  <div class="wrap">
    <div class="time">
      <el-date-picker
        v-model="dateRange"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        @change="handleDateChange"
      ></el-date-picker>
      <el-button
        type="primary"
        @click="handleTimeRange(5)"
        style="margin-left: 10px"
        >过去5分钟</el-button
      >
      <el-button @click="handleTimeRange(10)">过去10分钟</el-button>
      <el-button @click="handleTimeRange(60)">过去1小时</el-button>
    </div>

    <div ref="chartContainer1" class="chart"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { ElDatePicker } from "element-plus";

export default {
  components: {
    ElDatePicker,
  },
  data() {
    return {
      dateRange: [],
    };
  },
  methods: {
    handleDateChange(value) {
      console.log("选中的日期区间:", value);
    },
  },
  mounted() {
    let updatetime = [];
    let dataVelocity = [];
    let dataTemperature = [];

    let n = 1; // 前n分钟
    let m = 2; // n - m分钟
    let randomTemp = 1; // 温度波动范围，默认值为2
    let randomFluctuation = 0.05; // 可配置的振动随机波动范围，默认值为0.05

    const endTime = new Date();
    const startTime = new Date(endTime.getTime() - 5 * 60 * 1000);
    const nMinutes = n * 60 * 1000;
    const mMinutes = m * 60 * 1000;
    for (
      let time = new Date(endTime.getTime() - 5 * 60 * 1000);
      time <= endTime;
      time.setSeconds(time.getSeconds() + 3)
    ) {
      let elapsedSeconds = (time.getTime() - startTime.getTime()) / 1000;
      let wz_velocity;
      let temperature;
      if (elapsedSeconds < n * 60) {
        wz_velocity = 1.2 + (Math.random() - 0.5) * 2 * randomFluctuation;
        temperature = 50 + (Math.random() - 0.5) * 2 * randomTemp;
      } else if (elapsedSeconds < m * 60) {
        // 确保 wz_velocity 能在第n到m分钟逐步降到0.4
        wz_velocity =
          1.2 -
          (0.8 * (elapsedSeconds - n * 60)) / ((m - n) * 60) +
          (Math.random() - 0.5) * 2 * randomFluctuation;
        temperature =
          50 +
          (10 * (elapsedSeconds - n * 60)) / ((m - n) * 60) +
          (Math.random() - 0.5) * 2 * randomTemp;
      } else {
        wz_velocity = 0.4 + (Math.random() - 0.5) * 2 * randomFluctuation;
        temperature = 60 + (Math.random() - 0.5) * 2 * randomTemp;
      }

      function formatTime(date) {
        const hours = String(date.getHours()).padStart(2, "0");
        const minutes = String(date.getMinutes()).padStart(2, "0");
        const seconds = String(date.getSeconds()).padStart(2, "0");
        return `${hours}:${minutes}:${seconds}`;
      }
      updatetime.push(formatTime(time));
      dataVelocity.push(wz_velocity);
      dataTemperature.push(temperature);
    }

    console.log(updatetime, dataVelocity);

    this.chart1 = echarts.init(this.$refs.chartContainer1);
    this.chart1.setOption({
      title: { text: "历史数据", left: 20, top: 10 },
      legend: {
        data: ["速度", "温度"],
        backgroundColor: "#f5f5f5",
        borderColor: "#ccc",
        borderWidth: 1,
      },
      xAxis: {
        data: updatetime,
        splitLine: { show: true, lineStyle: { type: "dashed" } },
        axisLabel: {
          rotate: 0, // 增加标签旋转角度，防止数据挤在一起
          fontSize: 10, // 调整字体大小
          margin: 10, // 增加标签与轴的距离
        },
      },
      yAxis: [
        {
          type: "value",
          name: "速度",
          splitLine: { show: true, lineStyle: { type: "dashed" } },
          axisLabel: {
            fontSize: 12, // 调整字体大小
            margin: 10, // 增加标签与轴的距离
          },
        },
        {
          type: "value",
          name: "温度",
          splitLine: { show: true, lineStyle: { type: "dashed" } },
          axisLabel: {
            fontSize: 12, // 调整字体大小
            margin: 10, // 增加标签与轴的距离
          },
          min: 40,
          position: "right",
        },
      ],
      grid: {
        left: "3%", // 调整图表左边距
        right: "3%", // 调整图表右边距
        bottom: "60", // 增加底部边距，为旋转的标签留出空间
        top: "80",
        containLabel: true, // 确保标签不会被裁剪
      },
      dataZoom: [
        {
          type: "slider",
          xAxisIndex: 0,
          filterMode: "empty",
        },
      ],
      series: [
        {
          name: "速度",
          type: "line",
          smooth: true, // 启用平滑效果
          data: dataVelocity,
          lineStyle: { width: 2 }, // 增加线条宽度
          itemStyle: { borderWidth: 1 }, // 增加数据点边框
          // label: {
          //   show: true,
          //   position: "top",
          //   textStyle: { fontSize: 16, color: "#333" },
          // },
          showSymbol: false,
        },
        {
          name: "温度",
          type: "line",
          smooth: true, // 启用平滑效果
          data: dataTemperature,
          lineStyle: { width: 2 }, // 增加线条宽度
          itemStyle: { borderWidth: 1 }, // 增加数据点边框
          // label: {
          //   show: true,
          //   position: "top",
          //   textStyle: { fontSize: 16, color: "#333" },
          // },
          yAxisIndex: 1,
          showSymbol: false,
        },
      ],
    });
  },
};
</script>

<style scoped>
.wrap {
  padding: 20px;
  box-sizing: border-box;
}
.chart {
  width: 100%;
  height: 400px; /* 固定高度为300px */
  margin: 0;
  border: 1px solid #ddd; /* 添加边框以区分图表区域 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
}
.time {
  margin: 20px 0;
}
</style>